<div class="row">
	{taglib name="app\content\taglib\content" /}
	{content:category pid='0' return='data'/}
	{foreach name='data' item='vo'}
	{eq name='vo.ebcms_url' value=''}
		<div class="col-md-6">
			<div class="panel panel-default">
				{content:category pid='$vo.id' return='subcates'/}
				<div class="panel-heading">
					<div class="btn-group btn-group-xs pull-right category_tab" role="group" aria-label="...">
						{foreach name='subcates' item='subcate'}
						{eq name='subcate.ebcms_url' value=''}
						<span type="button" class="btn btn-default" data-id="{$subcate.id}">{$subcate.title}</span>
						{/eq}
						{/foreach}
					</div>
					<a href="{$vo.url}">{$vo.title}</a>
				</div>
				<div class="list-group">
				{foreach name='subcates' item='subcate'}
				{eq name='subcate.ebcms_url' value=''}
				<div id="content_category_{$subcate.id}" style="display:none;">
					{content:list category_id='$subcate.id' limit='5' return='lists'/}
					{foreach name='lists' item='vs'}
					<a href="{$vs.url}" class="list-group-item" style="{$vs.style}"> <strong>{$key+1}</strong>. {$vs.shorttitle|mb_substr=0,24}</a>
					{/foreach}
				</div>
				{/eq}
				{/foreach}
				</div>
			</div>
		</div>
	{/eq}
	{/foreach}
</div>
<script>
	$(function() {
		$('.category_tab span').bind('click', function(event) {
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).data('id');
			$('#content_category_'+id).show().siblings().hide();
		});
		$('.category_tab span').hover(function() {
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).data('id');
			$('#content_category_'+id).show().siblings().hide();
		});
		$.each($('.category_tab'), function(index, val) {
			$(this).children('span:eq(0)').click();
		});
	});
</script>